<template>
    <div className='search_form'>
        <div style="margin-bottom: 12px;border-left:  6px solid #15a732; padding-left: 8px">
            <span style="font-size: 16px; color: #15a732">
                创建信息<span style="font-size: 14px">Creactor Information</span>
            </span>
        </div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm boderForm">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item prop="applyNo">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请单号 :</span>
                            <span class="labelName">Doc.# :</span>
                        </div>
                        <el-input readonly v-model="applyNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="applyUser" label="创建人">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">创建人 :</span><br/>
                            <span class="labelName">Creator :</span>
                        </div>
                        <el-input readonly v-model="ruleForm.applyUser"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="createDate" label="创建时间">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">创建时间 :</span>
                            <span class="labelName">Create Date :</span>
                        </div>
                        <el-input readonly v-model="createDate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="status" label="状态">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">状态 :</span>
                            <span class="labelName">Status :</span>
                        </div>
                        <el-input readonly v-model="status"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="organizationId" label="购买机构">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">购买机构 :</span>
                            <span class="labelName">Purchase Campus :</span>
                        </div>
                        <el-select v-model="ruleForm.organizationId"
                                   @change="organizationChange">
                            <el-option
                                v-for="(item, index) in organizationList"
                                :key="index"
                                :label="item.organizationName"
                                :value="item.organizationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="workGroupId" label="购买部门 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">购买部门 :</span>
                            <span class="labelName">Purchase Dept :</span>
                        </div>
                        <el-select v-model="ruleForm.workGroupId">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.description"
                                :value="item.flexValueId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="purchaseTypeId" label="购买类型 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">购买类型 :</span>
                            <span class="labelName">Purchase Type :</span>
                        </div>
                        <el-select v-model="ruleForm.purchaseTypeId">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.description"
                                :value="item.flexValueId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="costCenter" label="成本中心">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">成本中心 :</span>
                            <span class="labelName">Cost Center :</span>
                        </div>
                        <el-input readonly v-model="costCenter"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="deliverySiteId" label="交付地点 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">交付地点 :</span>
                            <span class="labelName">Delivery Address :</span>
                        </div>
                        <el-select v-model="ruleForm.deliverySiteId">
                            <el-option
                                v-for="(item, index) in deliverySiteByOrgList"
                                :key="index"
                                :label="item.locationCode"
                                :value="item.locationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="reason" label="申请理由">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请理由 :</span>
                            <span class="labelName">Create Reason :</span>
                        </div>
                        <el-input placeholder="请输入申请物资理由（80字内）" v-model="ruleForm.reason"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="makeup" label="补单">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">补单 :</span>
                            <span class="labelName">Supplementary :</span>
                        </div>
                        <el-checkbox v-model="ruleForm.makeup"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="urgent" label="紧急">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">紧急 :</span>
                            <span class="labelName">Urgent :</span>
                        </div>
                        <el-checkbox v-model="ruleForm.urgent"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="address" label="实际收货地址">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">实际收货地址 :</span>
                            <span class="labelName">Actual Address :</span>
                        </div>
                        <el-input placeholder="请输入实际收货地址（50字内）" v-model="ruleForm.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="editData && editData.reviewStatus === 3">
                    <el-form-item prop="changeReason" label="更改原因">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName labelNameRequired">更改原因 :</span>
                            <span class="labelName">Change Reason :</span>
                        </div>
                        <el-input placeholder="请输入更改原因（100字内）" v-model="ruleForm.changeReason"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import CommonSlectList from "../../helpers/CommonSlect";
import {UserHelper} from "../../helpers/UserHelper";
import { TimeUtil } from '@eku/eku-tools';
import bus, {TYPES} from '../../common/bus'
import { getDetails } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";

const Cookie = require('js-cookie');
const urrentcTime = new Date().getTime(); // 当前日期

    export default {
        name: "application-form",
        props: {
            applyNo: '',
            editData: {},
        },
        data() {
            return {
                status: '新建',
                createDate: TimeUtil.formatDate(urrentcTime, 'yyyy-MM-dd HH:mm:ss'),
                costCenter: UserHelper.getUserCostCenter() || Cookie.get('userCostCenter'),
                ruleForm: {
                    applyUser: UserHelper.getUserName() || Cookie.get('userName'),
                    organizationId: parseInt(UserHelper.getOrganizationId() || Cookie.get('organizationId')),
                    workGroupId: null,
                    purchaseTypeId: null,
                    deliverySiteId: null,
                    reason: null,
                    makeup: null,
                    urgent: null,
                    address: null,
                    changeReason: null,
                },
            }
        },
        mixins: [CommonSlectList],
        updated(){
            let data = {
                ruleForm: this.ruleForm,
                organizationList: this.organizationList, // 购买机构下拉列表
                departmentList: this.departmentList, // 部门下拉列表
                purchaseTypeList: this.purchaseTypeList, // 购买类型下拉列表
                deliverySiteByOrgList: this.deliverySiteByOrgList, // 交付地点下拉列表
                reviewStatus: this.editData && this.editData.reviewStatus
            }
            bus.$emit(TYPES.updataApplicationForm, data);
        },
        mounted() {
            this.getOrganizationList();
            this.getDepartmentList();
            this.getPurchaseTypeList();
            // 编辑时 更新更新数据
            if(this.$route.query && this.$route.query.modeType === 'edit') {
                this.getApplyDetails(); // 编辑状态下调用详情接口
            }
        },
        watch: {
            '$route' (to, from) {
                if(to.query && to.query.modeType === 'edit') {
                    this.getApplyDetails(); // 编辑时 更新更新数据
                }
            }
        },
        methods: {
            organizationChange(value) { // 购买机构
                this.ruleForm.deliverySiteId = null // 每次重新选择机构 情况 交付地点值
                this.getDeliverySiteByOrgList(value)
            },
            resetForm() {
                this.$refs['ruleForm'].resetFields();
            },
            getApplyDetails() { // 详情数据
                try{
                    http.post(getDetails, {applyId: this.$route.query && this.$route.query.id}).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            let data = {applyId: res.data.data.apply.id, applyNo: res.data.data.apply.applyNo}
                            this.$emit('getDetailsApplyNo', data); // 更新父组件申请单ID
                            let editData = res.data.data.apply;
                            this.getDeliverySiteByOrgList(editData.organizationId); // 请求交付地点数据
                            this.createDate = editData.createTime;
                            this.ruleForm = {
                                applyUser: editData.applyUser,
                                organizationId: parseInt(editData.organizationId),
                                workGroupId: parseInt(editData.workGroupId),
                                purchaseTypeId: parseInt(editData.purchaseTypeId),
                                deliverySiteId: parseInt(editData.deliverySiteId),
                                reason: editData.reason,
                                makeup: editData.makeup,
                                urgent: editData.urgent,
                                address: editData.address,
                                changeReason: editData.changeReason || null,
                            };
                        }
                    })
                } catch (e){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },
        }
    }
</script>

<style scoped>
    .labelName{
        float: right;
        width: 100%;
    }
    .labelNameRequired:before {
        display: inline-block;
        margin-right: 4px;
        content: "*";
        font-family: SimSun;
        line-height: 1;
        font-size: 12px;
        color: #f04134;
    }
    .boderForm{
        background: #ffffff;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 3px 6px 10px #e5e5e5;
    }
</style>
